<template>
	<div>
		<!-- 顶部：分类  增加  -->
		<div class="filter-container">
			<el-select v-model="typeId" placeholder="选择类别" @change="handleTypeChanged">
				<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
			</el-select>
			<el-button type="primary" :icon="CirclePlus" @click="handleAdd">新增</el-button>
		</div>

		<!-- 数据列表 编辑 删除 表字段名 id,goodsId,href,seq_recommended,seq_new_arrival,seq_top_sale -->
		<div class="list-container">
			<el-table :data="dataList" border fit highlight-current-row style="width: 100%;">
				<el-table-column prop="sort" label="排序" width="60" align="center"></el-table-column>
				<el-table-column prop="goodsId" label="商品id" width="80"></el-table-column>
				<el-table-column prop="goodsName" label="商品名"></el-table-column>
				<el-table-column prop="goodsSpec" label="商品规格"></el-table-column>
				<el-table-column prop="goodsPrice" label="单价" width="60"></el-table-column>

				<el-table-column label="商品图片" width="200" align="center">
					<template #default="{row}">
						<el-image :src="$fullUrl(row.goodsImg)" :preview-src-list="[$fullUrl(row.goodsImg)]" preview-teleported></el-image>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template #default="{row}">
						<el-button link type="primary" :icon="Edit" @click="handleUpdate(row.id)">编辑</el-button>
						<el-button link type="danger" :icon="Delete" @click="handleDelete(row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 数据量不多，这里就不进行分页处理了 -->
		</div>

		<!-- 编辑弹出框 -->
		<home-goods-edit v-if="editDialogVisible" ref="editDialogRef" @refreshDataList="loadDataList" :typeId="typeId" :typeList="typeList" />
	</div>
</template>

<script setup>
import HomeGoodsEdit from './components/HomeGoodsEdit.vue';
import * as HomeAPI from '@/api/home.js';

import { ref, reactive, onMounted, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { CirclePlus, Edit, Delete } from '@element-plus/icons-vue';

const typeId = ref(2); //2为你推荐/3新品上线/4热销商品
const typeList = ref([{ id: 2, name: '为你推荐' }, { id: 3, name: '新品上线' }, { id: 4, name: '热销商品' }]); //1轮播
const dataList = ref([]); //列表数据
const editDialogVisible = ref(false); //编辑对话框
const editDialogRef = ref(null); // 声明模板中 DOM元素的引用, 必须和模板里的 ref 同名

// 获取列表数据
const loadDataList = async () => {
	let result = await HomeAPI.getGoodsList(typeId.value);
	dataList.value = result.data; //返回数据结构参见API文档
};
loadDataList(); // 获取数据

// 删除操作
const handleDelete = id => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(async () => {
		// 选择了确认，则删除后端数据库中的记录
		await HomeAPI.deleteById(id);
		loadDataList(); //同步列表中的记录
		ElMessage.success('删除成功');
	});
};

// 编辑操作，id为编辑记录的ID
const handleUpdate = async id => {
	editDialogVisible.value = true;
	await nextTick();
	editDialogRef.value.init(id);
};

// 增加记录
const handleAdd = async () => {
	editDialogVisible.value = true;
	await nextTick();
	editDialogRef.value.init(0); //id==0表示新增
};

// 类别更改
const handleTypeChanged = () => {
	loadDataList(); //刷新列表
};
</script>

<style scoped></style>
